S270: Platform Elements Evolution and Vitto Generation Pipeline Redesign

Session: 270 | Branch: session-265-273 | Date: 2026-03-25/26 Agent: Claude Code (Opus 4.6) | Status: Partial completion — wiring done, pipeline fix identified but not validated

1. Session Mission

Two objectives:

1. Platform Elements Evolution (S269 continuation): Wire the 5 remaining integration gaps from the S269 Platform Elements framework so the full editing loop works end-to-end (click element → context in chat → Vitto generates mutations → live DOM update → source sync).

2. Fix Vitto's generation pipeline: Vitto was always generating Angular/rspack output instead of Platform Elements HTML, even for simple CRUD platforms. Root cause analysis revealed 5 cascading defaults preventing PE auto-detection from ever triggering.

A third objective emerged during the session: redesign Vitto's output mode decision system — the current architecture has a fundamental semantic overload bug where BOTH means both "run both output paths" AND "auto-detect for me."

2. Work Completed

A. Platform Elements Integration Gaps (5/5 wired)

B. Generation Pipeline Fixes

C. Explicit UI Controls for Two Paths

D. Architecture Analysis

Completed full research of the generation pipeline:

• Mapped 8+ entry points with their default outputMode values
• Traced outputMode propagation through 6 layers (controller → service → phase executor → execute phase → SSE → frontend)
• Identified fundamental BOTH semantic overload bug
• Proposed 3-part redesign (AUTO enum, deterministic resolver, user feedback)

3. Current System State

What Works

• PE framework (S269): 41 custom elements, expression engine, mutation protocol, element inspector, two-bundle split — all functional
• 5 integration gaps: All wired (debounced write-back, context signal, entity cache, suggestion quickActions, tool prompt)
• Module panel UI: Auto / Platform Elements / Angular toggle renders correctly
• Slash commands: /generate angular and /generate elements registered in plugin
• Body parser: 5MB limit applied to backend-vitto-api
• Backend defaults: All endpoints now default to BOTH instead of CODE
• SSE forwarding: outputMode now forwarded from execute phase through tool plugin to frontend
• Demo: 18 P1 elements + mutation protocol demo at dist/platform-elements/demo-p1-elements.html
• 216 tests: All passing across 7 test files

What Partially Works

• Auto-detection: The LLM format decision now runs (defaults changed to BOTH), but:
  • Confidence threshold may still be too high for some cases
  • LLM may recommend 'code' for platforms that should be PE
  • No user visibility into the decision
  • Not yet validated end-to-end — user tested before backend restart with fixes

What Exists but Is NOT Fully Functional

• PE generation via Vitto chat: The full chain (chat message → agent loop → start_module_generation tool → PE generation → blob URL preview) has all the plumbing but was not validated end-to-end in this session. The user saw Angular output on every attempt.
• PE_ELEMENT_CONTEXT_SIGNAL: Wired in gograb-dev (port 6300) but NOT in gograb-space (port 6200) where the user actually runs the Studio
• onModuleGenerate callback: Wired in AiPanelTabsComponent but the underlying WorkflowStateService.startWorkflow() subscription is fire-and-forget (no error handling, no progress feedback to chat)

What Is Still Missing

• AUTO enum value: BOTH is still being overloaded to mean auto-detect
• Deterministic resolver: No code-based decision logic — still 100% LLM for format decision
• User feedback for format decision: Frontend doesn't show which format was chosen
• gograb-space provider: PE_ELEMENT_CONTEXT_SIGNAL not provided in gograb-space app.config
• Vibe Universe generator: Still has its own outputFormat signal — not connected to the centralized system

4. Critical Gaps

Gap A: BOTH Semantic Overload (Root Cause of Angular-Only Generation)

Why it matters: This is the #1 reason Vitto generates Angular instead of PE. When auto-detection keeps BOTH (LLM recommends 'code' or fails), the execute phase runs BOTH visual AND code paths (lines 143+156 of execute.phase.ts), always producing Angular files.

Root cause: BOTH was designed in early sessions to mean "generate both visual metadata AND Angular code." S269 repurposed it as an auto-detect trigger without changing its execution semantics.

What prevents correct behavior: The execute phase treats BOTH as "run both paths," not "the system chose code." There's no way to distinguish "user wants both outputs" from "auto-detection defaulted to code."

Gap B: No Deterministic Format Resolution

Why it matters: Every generation wastes an LLM round trip (~2-3 seconds, ~200 tokens) to decide PE vs code, even for obvious cases (3-entity CRUD → PE, real-time dashboard → Angular).

Root cause: The ANALYZE phase already produces entity counts, complexity assessments, and building blocks, but the format decision doesn't use them programmatically.

Gap C: Inconsistent Entry Points

Why it matters: 8+ entry points each manage their own outputMode default. Any new feature that triggers generation will get the default wrong unless the developer knows about all the others.

Root cause: No centralized default. Each layer independently chooses a fallback.

Gap D: gograb-space Missing PE Context Wiring

Why it matters: The user runs Studio from gograb-space (port 6200), not gograb-dev (port 6300). The PE_ELEMENT_CONTEXT_SIGNAL provider was only added to gograb-dev's app.config.ts.

Root cause: Session only wired the provider in one app, not all apps that use AiPanelTabsComponent.

Gap E: No End-to-End Validation

Why it matters: Despite all fixes, no one has confirmed the complete chain works: chat message → Vitto agent → start_module_generation(outputMode: 'platform-elements') → PE HTML generated → SSE forwarded with outputMode → frontend routes to blob URL → instant preview.

Root cause: Backend wasn't restarted with all fixes before the session ended.

5. Prioritized Recommendations

STREAM 1: Platform Elements Framework & Implementation

Tier 1 — High Leverage / Low Effort

Tier 2 — Medium Effort / High Impact

Tier 3 — Large / Transformative

STREAM 2: Vitto Internal Thinking & Decision Processes

Tier 1 — High Leverage / Low Effort

Tier 2 — Medium Effort / High Impact

Tier 3 — Large / Transformative

6. The One Highest-Leverage Next Step

Task 2.1: Add AUTO to ModuleGenOutputMode and replace all BOTH defaults.

This is a ~1-2 hour change that fixes the fundamental architectural flaw. Without it, every other fix is a band-aid — the BOTH overload will keep causing Angular-only generation. The change is:

1. Add AUTO = 'auto' to the enum (1 line)
2. Add resolution in module-gen-phase.executor.ts after ANALYZE:

   if (session.request.outputMode === ModuleGenOutputMode.AUTO) {
     session.request.outputMode = resolveFormat(analyze) ?? await llmDecideFormat(analyze);
   }
   

3. Change all 8+ defaults from BOTH to AUTO
4. BOTH retains its original meaning: "generate both visual AND code outputs"

This unblocks everything else. Tasks 2.4, 2.5, 2.8 all depend on clean AUTO semantics.

7. Files / Systems to Inspect

Generation Pipeline (Backend)

Frontend Generation / Preview

Chat Plugin System

App Configs (PE_ELEMENT_CONTEXT_SIGNAL wiring)

Vibe Universe Generator

8. Validation Checklist

Before Implementing Changes

• Run preflight({ task: "..." }) to get session context
• Verify branch is session-265-273 or create appropriate session branch
• Read module-generation.types.ts to confirm current ModuleGenOutputMode enum values
• Read module-gen-phase.executor.ts lines 236-273 to understand current auto-detection
• Restart backend-vitto-api after any changes to controllers, tools, or main.ts

After Implementing Changes

• E2E test — explicit PE: Call /module-generation/start?outputMode=platform-elements&description=... and verify HTML output with blob URL preview
• E2E test — explicit Angular: Call with outputMode=code and verify rspack compilation
• E2E test — auto-detect: Call with outputMode=auto (new) for a simple 3-entity CRUD and verify PE is chosen
• E2E test — auto-detect complex: Call with outputMode=auto for a complex platform (real-time, SSR) and verify Angular is chosen
• Chat test: Type "Create a task manager with Tasks and Categories" in Vitto chat and verify format decision is logged and correct output generated
• Module panel test: Use the Auto/PE/Angular toggle and verify each mode produces the correct output
• Slash command test: Try /generate elements simple inventory tracker and /generate angular complex dashboard with real-time updates
• Verify backend logs show: Output format decision: recommendation=..., confidence=..., reason=...
• Verify no regression in existing Angular generation path

Edge Cases

• What happens when outputMode=auto and the ANALYZE phase fails? (Should fall back to CODE, not crash)
• What happens when PE generation produces invalid HTML? (Preview should show error, not blank)
• What happens when entity cache fetch fails? (Should degrade gracefully — empty fields, not crash)
• What if the user switches universes during generation? (resetForUniverseSwitch should clear PE state)

9. MCP and Codebase Guidance

Tools to Use

Key Conventions (from S270)

1. ModuleGenOutputMode defaults MUST be centralized — never hardcode 'code' as default in individual entry points
2. SSE forwarding requires explicit field inclusion — new fields emitted by execute.phase.ts must be manually added to module-gen.plugin.ts forwarding object
3. Module boundary: vitto-chat cannot import from platform-preview — use InjectionToken pattern for cross-boundary signals

Prior Decision IDs to Reference

• dev_1774534762101_1om7w68 — Root cause of Angular-only generation (5 cascading defaults)
• dev_1774534783563_v2360k6 — BOTH semantic overload architecture analysis
• dev_1774534803579_234qh62 — 5 integration gap wiring implementation
• S268 decision on dual pipeline architecture
• S269 PE framework + 18 P1 elements

10. COPY/PASTE PROMPT FOR SESSION 270 CONTINUATION

SESSION CONTINUATION: S270 — Platform Elements Evolution & Vitto Pipeline Redesign

## Mission
Two parallel streams:
1. PLATFORM ELEMENTS: Complete PE framework integration, validate end-to-end generation
2. VITTO INTERNALS: Fix the output mode decision system so PE generation actually triggers

## Current State
- 5 PE integration gaps WIRED but NOT validated end-to-end
- Generation pipeline defaults FIXED (CODE → BOTH) but fundamental BOTH overload remains
- Module panel has Auto/PE/Angular toggle, /generate slash commands exist
- Body parser raised to 5MB
- PE_ELEMENT_CONTEXT_SIGNAL wired in gograb-dev but NOT gograb-space (where user runs Studio)
- Backend must be restarted to pick up all changes

## Critical Gaps (Priority Order)

### STREAM 2 (Vitto Internals) — Do First
1. **Add AUTO to ModuleGenOutputMode enum** — BOTH means "run both paths" not "decide for me". Add AUTO = 'auto', replace all defaults, add resolution logic in module-gen-phase.executor.ts after ANALYZE. ~1-2 hours.
2. **Deterministic format resolver** — Use ANALYZE output (entity count ≤10, no complex features → PE; else → CODE). LLM only for ambiguous cases. ~2-3 hours.
3. **Surface format decision to user** — Emit in activity feed so user sees "Output: Platform Elements (instant HTML)" vs "Output: Angular (full compilation)". ~2 hours.
4. **Centralize default outputMode** — Single constant, not per-endpoint defaults. ~30 min.
5. **Unify SSE forwarding** — Stop manually listing fields. Use spread or co-located whitelist. ~1-2 hours.

### STREAM 1 (PE Framework) — After Stream 2 Basics
1. **Wire PE_ELEMENT_CONTEXT_SIGNAL in gograb-space app.config** — 15 min
2. **E2E validation** — Restart backend, generate with explicit PE mode, verify blob URL preview
3. **Wire Vibe Universe outputFormat** — Connect to centralized system
4. **Integrate full suggestion engine output** into chat context

## Key Files to Inspect First
- `APIs/backend-vitto-api/src/app/module-generation/module-generation.types.ts` — enum definition
- `APIs/backend-vitto-api/src/app/module-generation/phases/module-gen-phase.executor.ts:236-273` — auto-detection
- `APIs/backend-vitto-api/src/app/module-generation/phases/execute.phase.ts:82-156` — three-way branch
- `APIs/backend-vitto-api/src/app/tools/plugins/module-gen.plugin.ts` — tool enum + SSE forwarding

## Warnings
- BOTH overload is the #1 root cause — don't add more band-aids, fix the enum
- Backend must be restarted after ANY changes to controllers/tools/main.ts
- User runs Studio from gograb-space (port 6200), not gograb-dev (port 6300)
- MCP path (mcp-server.service.ts) hardcodes VISUAL — audit before deprecating
- No git commits were made in S270 (constraint: concurrent session on same branch)

## MCP Tools
Use preflight, find_similar, convention, intelligence, log_decision, outcome.
Key convention: "ModuleGenOutputMode defaults MUST be centralized"
Key decisions: dev_1774534762101_1om7w68 (cascading defaults), dev_1774534783563_v2360k6 (BOTH overload)

## How to Proceed
1. Run preflight({ task: "S270 continuation" })
2. Start with Task 2.1 (AUTO enum) — it unblocks everything else
3. Validate E2E after each change by restarting backend and generating a simple CRUD platform
4. Log decisions and outcomes via MCP
5. Act as a senior engineer: correctness over speed, no hallucination, verify assumptions

Generated by Claude Code (S270) — 2026-03-26